<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="オロナミンC（大塚製薬） みんながMake Me Smile!" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://youtube.com/watch?v={videoData.videoId}&feature=player_embedded" />
<meta property="og:image" content="http://119.75.230.38/facebook_terras/coverimage_test/fbapp/img/smile_logo.gif" />
<meta property="og:site_name" content="オロナミンC（大塚製薬） みんながMake Me Smile!" />
<meta property="fb:app_id" content="{FB.appId}"/>
<meta property="og:description" content="オロナミンC（大塚製薬）のFacebookアプリ、みんながMake Me Smile! 笑顔いっぱいのカバー画像をつくって、あなたのタイムラインに設定しよう！" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<!-- <script type="text/javascript" src="js/swfobject.js"></script> -->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<title></title>
<link rel="stylesheet" href="css/common.css" />
<!--  fb -->
<script type="text/javascript">
window.onbeforeunload = function () {
	top.location.href='{redirect_uri}';
}

//Set hidden scroll bar
$(window).load(function(){
	FB.Canvas.setSize({height:650});
});

var PLAY_CLICK = false;
var VIDEO_ID = '{videoId}';
$(document).ready(function(){
	FB.Canvas.scrollTo(0, 0);
	//Click like button

	FB.Event.subscribe('edge.create', function(response) {
		if(response){
			//window.location.href = '?d:remain=&like=1';
			$.ajax({
		        type: 'POST',
		        url: '{myself}',
		        data: 'd:remain=&like=1&videoId='+VIDEO_ID,
		        success: function(data){
		            if( '' != data ){
		                $('.viewRemain').html(data);
		            }
		        },
		        error: function(xhr, status, thrown){
		            alert('can not connecting ...');
		        }
			});
		}

	});

	// Click unlike

	FB.Event.subscribe('edge.remove', function (response) {
		$.ajax({
	        type: 'POST',
	        url: '{myself}',
	        data: 'd:remain=&like=0&videoId='+VIDEO_ID,
	        success: function(data){
	            if( '' != data ){
	                $('.viewRemain').html(data);
	            }
	        },
	        error: function(xhr, status, thrown){
	            alert('can not connecting ...');
	        }
		});
	});

	$('#share').bind('click',fshare);
	function fshare(e){
		FB.ui({
			  method: "stream.publish",
			  display: "iframe",
			  attachment: {
			     name: "{videoTitle}",
			     //caption: "Joe has tested his skills and did extremely well",
			     description: "{videoDesc}",
			     href: "http://youtube.com/watch?v={videoId}&feature=player_embedded",
			     media:[{"type":"image","src":"{videoThumb}","href":"http://example.com/"}]
			  } //,
			  //action_links: [{ text: 'Test yourself', href: 'http://example.com/test.php' }]
			 },
			 function(response) {
			   if (response && response.post_id) {
				   $.ajax({
				        type: 'POST',
				        url: '{myself}',
				        data: 'd:remain=&like=2&videoId='+VIDEO_ID,
				        success: function(data){
				            if( '' != data ){
				                $('.viewRemain').html(data);
				            }
				        },
				        error: function(xhr, status, thrown){
				            alert('can not connecting ...');
				        }
					});
			   } else {
			     //alert('Post was not published.');
			   }
			 }
			);

	}
});
</script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
(function(d, s, id) {
			  var js, fjs = d.getElementsByTagName(s)[0];
			  if (d.getElementById(id)) return;
			  js = d.createElement(s); js.id = id;
			  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId={FB.appId}";
			  fjs.parentNode.insertBefore(js, fjs);
			}(document, 'script', 'facebook-jssdk'));
</script>
<div id="wrapper">
	<div id="counter">

		<p class="play-info">視聴済み数： <span class="viewCount">{watchedCount}</span> 個　　視聴可能数：<span class="viewRemain"> {viewRemain} </span>個</p>
	</div>

	<div id="content" class="clearfix">
	<div id="social-nav" class="top clearfix">
		<div id="share">
		<h1>Share</h1>
		</div>
		<div id="likeBt" >
				<div class="fb-like" data-href="http://youtube.com/watch?v={videoId}&feature=player_embedded" data-send="false"
					data-layout="button_count" data-width="140" data-show-faces="false" style="overflow: visible">
				</div>
		</div>
	</div>
		<div id="video_player">

			<div id="ytplayer">
				<p>You will need Flash 8 or better to view this content.</p>
			</div>
			<script type="text/javascript">
				google.load("swfobject", "2.1");
				/*
				 * Polling the player for information
				 */

				// Update a particular HTML element with a new value
				function updateHTML(elmId, value) {
				  document.getElementById(elmId).innerHTML = value;
				}

				// This function is called when an error is thrown by the player
				function onPlayerError(errorCode) {
				  alert("An error occured of type:" + errorCode);
				}

				// This function is called when the player changes state
				function onPlayerStateChange(newState) {
				  //console.log(document.getElementById(elmId));
				  if(newState==1&&!PLAY_CLICK) {
					PLAY_CLICK = true;
					$.ajax({
					        type: 'POST',
					        url: '{myself}',
					        data: 'd:watch=&videoId='+VIDEO_ID,
					        success: function(data){
					            if( '' != data ){
					                $('#counter').html(data);
					            }
					        },
					        error: function(xhr, status, thrown){
					            alert('can not connecting ...');
					        }
						});
				   } else {
				     //alert('Post was not published.');
				   }
				  updateHTML("playerState", newState);
				}

				// Display information about the current state of the player
				// This function is automatically called by the player once it loads
				function onYouTubePlayerReady(playerId) {
					ytplayer = document.getElementById("ytPlayer");
					ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
					ytplayer.addEventListener("onError", "onPlayerError");
				}

				// The "main method" of this sample. Called when someone clicks "Run".
				function loadPlayer() {
				  // The video to load
				  //var videoID = "{videoId}"
				  // Lets Flash from another domain call JavaScript
				  var params = { allowScriptAccess: "always" };
				  // The element id of the Flash embed
				  var atts = { id: "ytPlayer" };
				  // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
				  swfobject.embedSWF("http://www.youtube.com/v/" +VIDEO_ID +
				                     "?version=1&enablejsapi=1&playerapiid=player1",
				                     "ytplayer", "640", "390", "10", null, null, params, atts);
				}
				function _run() {
				        loadPlayer();
				      }
			google.setOnLoadCallback(_run);

			</script>
		<!-- end #video_player --></div>
	<!-- content --></div>
<!-- end #wrapper --></div>


<script src="https://connect.facebook.net/ja_JP/all.js"></script>

<script type="text/javascript">
	window.fbAsyncInit = function() {
		FB.init({
		    appId  : '{FB.appId}',
		    oauth  : true,
		    status : true, // check login status
		    cookie : true, // enable cookies to allow the server to access the session
		    xfbml  : true  // parse XFBML
		});
	};
</script>
</body>
</html>